<template>
  <view class="order-detail">
    <!-- 课程信息 -->
    <view class="section course-section">
      <view class="course-info">
        <image class="course-image" :src="orderInfo.courseInfo.coverImage" mode="aspectFill"></image>
        <view class="course-content">
          <text class="course-title">{{ orderInfo.courseInfo.title }}</text>
          <text class="course-price">¥{{ orderInfo.courseInfo.price }}</text>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="section order-section">
      <view class="section-title">订单信息</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">订单编号</text>
          <text class="value">{{ orderInfo._id }}</text>
        </view>
        <view class="info-item">
          <text class="label">下单时间</text>
          <text class="value">{{ formatDate(orderInfo.createTime) }}</text>
        </view>
        <view class="info-item">
          <text class="label">支付方式</text>
          <text class="value">{{ orderInfo.paymentMethod || '微信支付' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 课程详情 -->
    <view class="section course-detail-section">
      <view class="section-title">课程详情</view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">课程地点</text>
          <text class="value">{{ orderInfo.courseInfo.location }}</text>
        </view>
        <view class="info-item">
          <text class="label">课程时长</text>
          <text class="value">{{ orderInfo.courseInfo.duration }}</text>
        </view>
        <view class="info-item">
          <text class="label">适合人群</text>
          <text class="value">{{ orderInfo.courseInfo.suitableFor }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="action-btn contact" @click="contactService">
        <text class="iconfont icon-service"></text>
        <text>联系客服</text>
      </button>
      <button class="action-btn share" @click="shareOrder">
        <text class="iconfont icon-share"></text>
        <text>分享课程</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: '',
      orderInfo: {
        _id: '',
        price: 0,
        createTime: '',
        courseInfo: {
          title: '',
          coverImage: '',
          location: '',
          duration: '',
          suitableFor: ''
        }
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.orderId = options.id;
      this.loadOrderDetail();
    }
  },
  methods: {
    // 加载订单详情
    async loadOrderDetail() {
      try {
        const res = await uniCloud.callFunction({
          name: 'getOrderDetail',
          data: {
            orderId: this.orderId
          }
        });
        
        if (res.result.code === 0) {
          this.orderInfo = res.result.data;
        } else {
          uni.showToast({
            title: res.result.msg || '加载失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载订单详情失败', error);
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      }
    },
    
    // 联系客服
    contactService() {
      uni.showModal({
        title: '联系客服',
        content: '客服电话：400-123-4567',
        confirmText: '拨打',
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: '4001234567'
            });
          }
        }
      });
    },
    
    // 分享订单
    shareOrder() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
    },
    
    // 格式化日期
    formatDate(timestamp) {
      if (!timestamp) return '';
      
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hour = date.getHours().toString().padStart(2, '0');
      const minute = date.getMinutes().toString().padStart(2, '0');
      
      return `${year}-${month}-${day} ${hour}:${minute}`;
    }
  }
}
</script>

<style>
.order-detail {
  min-height: 100vh;
  background-color: #f8f9fc;
  padding-bottom: 120rpx;
}

.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.course-section {
  padding: 0;
}

.course-info {
  position: relative;
}

.course-image {
  width: 100%;
  height: 400rpx;
}

.course-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.course-title {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.course-price {
  font-size: 32rpx;
  color: #ff6b6b;
  font-weight: bold;
}

.info-list {
  background-color: #f8f9fc;
  border-radius: 12rpx;
  padding: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  font-size: 28rpx;
}

.info-item:not(:last-child) {
  border-bottom: 2rpx solid #eee;
}

.info-item .label {
  color: #666;
}

.info-item .value {
  color: #333;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn .iconfont {
  margin-right: 10rpx;
  font-size: 32rpx;
}

.action-btn.contact {
  background-color: #fff7e6;
  color: #fa8c16;
}

.action-btn.share {
  background-color: #e6f7ff;
  color: #1890ff;
}

/* 图标字体 */
@font-face {
  font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_3456789_abcdef.woff2') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-service:before {
  content: "\e634";
}

.icon-share:before {
  content: "\e636";
}
</style> 